import { FlatList, Image, StyleSheet, Text, TouchableHighlight, View } from "react-native";
import { windowHeight, windowWidth } from "../util";
import { LiteratureType } from "../util/publicType";

// 文献子项
// 子项
const Index = ({ item }: { item: LiteratureType }) => {
  return (
    <TouchableHighlight onPress={() => console.log("触摸了")} underlayColor="#ddd" activeOpacity={0.6}>
      <View style={styles.item} key={item.id}>
        <View style={styles.left}>
          <Image style={styles.img} source={{
            uri: item.cover.path
          }} />
        </View>
        <View style={styles.right}>
          <Text ellipsizeMode="tail" numberOfLines={1} style={styles.title}>{item.name}</Text>
          <Text style={styles.content} ellipsizeMode="tail" numberOfLines={4}>
            {item.introduce}
          </Text>
        </View>
      </View>
    </TouchableHighlight>
  );
};

const styles = StyleSheet.create({
  box: {
    width: windowWidth,
    paddingLeft: 10,
    paddingRight: 10,
    flex: 1,
    marginBottom: 100
  },
  item: {
    marginBottom: 10,
    width: "100%",
    display: "flex",
    height: 120,
    justifyContent: "space-between",
    alignItems:"center",
    flexDirection: "row",
    padding: 10,
    backgroundColor: "#fff",
    paddingTop: 6,
    paddingBottom: 6,
    borderRadius: 10,
    // 设置阴影颜色
    shadowColor: "#000",
    // 设置颜色透明度
    shadowOpacity: 0.2,
    // 设置阴影模糊半径
    shadowRadius: 3,
    // 设置偏移量
    shadowOffset: { width: 3, height: -3 },
    // android平台只支持这个属性设置阴影
    elevation: 3
  },
  left: {
    borderStyle: "solid",
    borderWidth: 1,
    borderColor: "#aaa",
    flex: 1,
    maxWidth: "29%",
    minWidth: "29%",
    marginRight: "2%"
  },
  right: {
    flex: 2
  },
  img: {
    width: "100%",
    height: "100%"
  },
  title: {
    fontSize: 16,
    color: "#111",
    fontWeight: "900",
  },
  content: {
    fontSize: 12,
    color: "#666",
    lineHeight: 16
  }
});

export default Index;
